<template>
  <div>
   
  <el-row v-for="i in rows" :key="i" :gutter="5">
      <el-col v-for="j in cols" :key="j" :span="6">
      <div v-if="i == 1">
       课程名称:{{tableData[j-1].kcmc}}
       任课教师:{{tableData[j-1].rkjs}} 
       学习人数:{{tableData[j-1].xxrs}}
       出版社:{{tableData[j-1].cbs}}  
       </div>
       <div v-if="i > 1">
       课程名称:{{tableData[(2*i-1)+j].kcmc}}
       任课教师:{{tableData[(2*i-1)+j].rkjs}} 
       学习人数:{{tableData[(2*i-1)+j].xxrs}}
       出版社:{{tableData[(2*i-1)+j].cbs}}  
       </div>
      </el-col> 
  </el-row>

  <el-button type="primary" round @click="dialogFormVisible = true">创建课程</el-button>
  <el-dialog title="课程信息" :visible.sync="dialogFormVisible">
  <el-form :label-position="labelPosition" label-width="120px" :model="formLabelAlign">
    <el-form-item label="课程名称" label-width="120px">
      <el-input v-model="formLabelAlign.kcmc" ></el-input>
    </el-form-item>
    <el-form-item label="课程类型" label-width="120px">
        <el-select v-model="formLabelAlign.kclx" placeholder="请选择课程类型">
        <el-option label="免费" value="0"></el-option>
        <el-option label="付费" value="1"></el-option>
    </el-select>
    </el-form-item>
    <el-form-item label="课程学时" label-width="120px">
      <el-input v-model="formLabelAlign.kcxs" ></el-input>
    </el-form-item>
    <el-form-item label="任课教师" label-width="120px">
      <el-input v-model="formLabelAlign.rkjs" ></el-input>
    </el-form-item>
    <el-form-item label="学习人数" label-width="120px">
      <el-input v-model="formLabelAlign.xxrs" ></el-input>
    </el-form-item>
    <el-form-item label="出版社" label-width="120px">
      <el-input v-model="formLabelAlign.cbs" ></el-input>
    </el-form-item>
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="savelesson">确 定</el-button>
  </el-form>
  </el-dialog>
  </div>
</template>
<script>

export default {
  name: "eduteacherTable",
  data() {
    return {
      tableData:[],
      rows:1,
      cols:4,
      dialogFormVisible: false,
      labelPosition: 'right',
      formLabelAlign: {
        kcmc: '',
        kclx: '',
        kcxs: '',
        rkjs: '',
        xxrs: '',
        cbs: ''
      }
    }
   },
    mounted: function() {
    this.load();
  },
  methods: {
    load() {
      this.ajax({
        url: this.API.teacher.table,
        data: {},
        success: resultData => {
          this.tableData = resultData.data
          this.rows = resultData.data.length/4
          // console.log(this.rows);
        }
      });
    },
     savelesson () {
        this.ajax({
        url: this.API.teacher.savelesson,
        data: {

        },
        success: resultData => {
          location.reload()
          // dialogFormVisible:false
          // this.$router.push(this.$route.query.redirect || '/')
        }
      });
     }
  }
};
</script>

<style scoped>

</style>